<template>
  <page-header-wrapper>
    <div class="gutter-example">
      <a-row :gutter="[16, { xs: 8, sm: 16, md: 24, lg: 32 }]">
        <a-col :span="6" class="gutter-row">
          <a-row class="gutter-box">
            <a-col :span="7"> <img src="~@/assets/layers.png" class="logo" alt="logo" /> </a-col>
            <a-col :span="17">
              <a-statistic title="漏洞资产总量" :value="inventoryCount" style="margin-right: 50px" />
            </a-col>
          </a-row>
        </a-col>
        <a-col :span="6" class="gutter-row">
          <a-row class="gutter-box">
            <a-col :span="7"> <img src="~@/assets/layers.png" class="logo" alt="logo" /> </a-col>
            <a-col :span="17">
              <a-statistic title="未打补丁数量" :value="patchCount" style="margin-right: 50px" />
            </a-col>
          </a-row>
        </a-col>
        <a-col :span="6" class="gutter-row">
          <a-row class="gutter-box">
            <a-col :span="7"> <img src="~@/assets/layers.png" class="logo" alt="logo" /> </a-col>
            <a-col :span="17">
              <a-statistic title="本月新增补丁" :value="incrementPatchCountMonth" style="margin-right: 50px" />
            </a-col>
          </a-row>
        </a-col>
        <a-col :span="6" class="gutter-row">
          <a-row class="gutter-box">
            <a-col :span="7"> <img src="~@/assets/layers.png" class="logo" alt="logo" /> </a-col>
            <a-col :span="17">
              <a-statistic title="本月转正补丁" :value="formalPatchCountMonth" style="margin-right: 50px" />
            </a-col>
          </a-row>
        </a-col>
      </a-row>
    </div>

    <a-card :bordered="false" :body-style="{ padding: '0' }" style="margin-top: 10px">
      <a-row>
        <a-col :span="23" :offset="0" style="margin-left: 10px">
          <a-row :gutter="30">
            <a-col :xl="8" :lg="8" :md="12" :sm="24" :xs="24" style="margin-top: 10px">
              <a-card :body-style="{ padding: '0' }">
                <LeakAssetBar :data="top5data"/>
              </a-card>
            </a-col>
            <a-col :xl="8" :lg="8" :md="12" :sm="24" :xs="24" style="margin-top: 10px">
              <a-card :body-style="{ padding: '0' }">
                <LeakAssetGroupBar />
              </a-card>
            </a-col>
            <a-col :xl="8" :lg="8" :md="12" :sm="24" :xs="24" style="margin-top: 10px">
              <a-card :body-style="{ padding: '0' }">
                <PatchUpdateCurveline />
              </a-card>
            </a-col>
            <a-col :xl="8" :lg="8" :md="12" :sm="24" :xs="24" style="margin-top: 10px">
              <a-card :body-style="{ padding: '0' }">
                <AssetRiskPie :data="safepiedata" />
              </a-card>
            </a-col>
            <a-col :xl="8" :lg="8" :md="12" :sm="24" :xs="24" style="margin-top: 10px">
              <a-card :body-style="{ padding: '0' }">
                <NotPatchPie :data="top10data"/>
              </a-card>
            </a-col>
            <a-col :xl="8" :lg="8" :md="12" :sm="24" :xs="24" style="margin-top: 10px">
              <a-card :body-style="{ padding: '0' }">
                <SystemMonitorLine />
              </a-card>
            </a-col>
          </a-row>
        </a-col>
      </a-row>
<!--      <a-row style="margin-top: 20px">-->
<!--        <OverviewWarning />-->
<!--      </a-row>-->
      <a-row style="margin-top: 20px">
        <a-row>
          <a-row>
            <a-col :xl="2" :lg="4" :md="4" :sm="24" :xs="24" :style="{ marginLeft: '5px' }">
              <h1>计划列表</h1>
            </a-col>
          </a-row>
          <a-row style="margin-bottom: 20px">
            <a-col :span="3">
              <a-input placeholder="请输入任务名称" v-model="search"/>
            </a-col>
            <a-col :span="3" :offset="1">
              <a-select style="width: 100%"  placeholder="请选择" v-model="tasktype">
                <a-select-option value="">全部</a-select-option>
                <a-select-option value="1">漏洞扫描</a-select-option>
                <a-select-option value="2">补丁策略</a-select-option>
              </a-select>
            </a-col>
            <a-col :span="3" :offset="1">
              <a-button type="primary" @click="searchlist()">查询</a-button>
            </a-col>
          </a-row>
          <a-table :columns="columns" :data-source="data" :pagination="tablepagination" @change="tablechange">
            <template slot="executeFun" slot-scope="text, record">
              {{executeFunMap[text]}}
            </template>

            <template slot="executeTime" slot-scope="text, record">
              {{text?text.replace('T',' '):''}}
            </template>
            <template slot="lastExecuteTime" slot-scope="text, record">
              {{text?text.replace('T',' '):''}}
            </template>
            <template slot="taskType" slot-scope="text, record">
              {{text==1?'漏洞扫描':'补丁策略'}}
            </template>
          </a-table>
        </a-row>
      </a-row>
    </a-card>
  </page-header-wrapper>
</template>

<script>
import { PageHeaderWrapper } from '@ant-design-vue/pro-layout'
import BatchBar from '@/components/Charts/BatchBar'
import Pie from '@/components/Charts/Pie'
import OverviewTable from '@/components/Table/OverviewTable'
import OverviewWarning from '@/components/Table/OverviewWarning'
import AssetRiskPie from '@/components/Overview/AssetRiskPie'
import LeakAssetBar from '@/components/Overview/LeakAssetBar'
import LeakAssetGroupBar from '@/components/Overview/LeakAssetGroupBar'
import NotPatchPie from '@/components/Overview/NotPatchPie'
import PatchUpdateCurveline from '@/components/Overview/PatchUpdateCurveline'
import SystemMonitorLine from '@/components/Overview/SystemMonitorLine'
import {getoverview,getplan,getchartdata} from '@/api/overview'
import DataSet from '@antv/data-set'
export default {
  name: 'Overview',
  components: {
    PageHeaderWrapper,
    BatchBar,
    Pie,
    OverviewTable,
    OverviewWarning,
    AssetRiskPie,
    LeakAssetBar,
    LeakAssetGroupBar,
    NotPatchPie,
    PatchUpdateCurveline,
    SystemMonitorLine,
  },
  data() {
    return {
      executeFunMap:{
        '0':'定时执行',
        '1':'间断执行',
        '2':'指定时间执行'
      },
      loading: true,
      patchCount:0,
      incrementPatchCountMonth:0,
      formalPatchCountMonth:0,
      inventoryCount:0,
      data:[],
      search:'',
      tasktype:'',
      rowSelection:{
        onChange: (selectedRowKeys, selectedRows) => {
          this.selectarray = selectedRows
          document.getElementById('app').style.transform = `scale(1)`
          document.getElementById('app').style.transformOrigin = `0 0`
          document.getElementById('app').style.height = `100%`
          setTimeout(()=>{
            var scale = (window.innerWidth-20)/1900
            document.getElementById('app').style.transform = `scale(${scale})`
            document.getElementById('app').style.transformOrigin = `0 0`
            document.getElementById('app').style.height = `${100/scale}%`
          },0)
        },
        onSelect: (record, selected, selectedRows) => {
        },
        onSelectAll: (selected, selectedRows, changeRows) => {
        },
      },
      tablepagination:{
        showTotal:(total, range) => {return `共搜索到${total}条数据`},
        current:1,
        total:0
      },
      columns:[
        {
          title:'任务名称',
          key:'taskName',
          dataIndex: 'taskName',
        },
        {
          title:'任务类型',
          key:'taskType',
          dataIndex: 'taskType',
          scopedSlots: { customRender: 'taskType' },
        },
        {
          title:'执行方式',
          key:'executeFun',
          dataIndex: 'executeFun',
          scopedSlots: { customRender: 'executeFun' },
        },
        {
          title:'执行时间',
          key:'executeTime',
          dataIndex: 'executeTime',
          scopedSlots: { customRender: 'executeTime' },
        },
        {
          title:'最后执行时间',
          key:'lastExecuteTime',
          dataIndex: 'lastExecuteTime',
          scopedSlots: { customRender: 'lastExecuteTime' },
        },
      ],
      top5data:[],
      safepiedata:[],
      top10data:[]
    }
  },
  mounted() {
    var myEvent = new Event('resize');
    window.dispatchEvent(myEvent);
    this.getdata()
    this.planlist()
    this.getcharts()
  },
  methods:{
    getcharts(){
      getchartdata({}).then(res=>{
        for(let i in res.data){
          if(res.data[i].name == 'leak_inventory_sum'){
            this.inventoryCount = res.data[i].value
          }
          if(res.data[i].name == 'month_new_patch_sum'){
            this.incrementPatchCountMonth = res.data[i].value
          }
          if(res.data[i].name == 'month_regular_patch_sum'){
            this.formalPatchCountMonth = res.data[i].value
          }
          if(res.data[i].name == 'unpatch_sum'){
            this.patchCount = res.data[i].value
          }
          if(res.data[i].name == 'leak_inventory_top5'){
            this.top5data = JSON.parse(res.data[i].value)
          }
          if(res.data[i].name == 'unpatch_top10'){
            let d = JSON.parse(res.data[i].value)
            let s = []
            for(let i in d){
              let j = {}
              j.item = d[i].cve_id
              j.count = d[i].num
              s.push(j)
            }

            const dv = new DataSet.View().source(s)
            dv.transform({
              type: 'percent',
              field: 'count',
              dimension: 'item',
              as: 'percent',
            })
            const data = dv.rows

            this.top10data = data
          }
          if(res.data[i].name == 'inventory_safe_distribute'){
            let mapss = {
              '-1':'--',
              '0': '安全',
              '1': '低危',
              '2': '中危',
              '3': '高危'
          }
            let d = JSON.parse(res.data[i].value)
            let s = []
            for(let i in d){
              let j = {}
              j.item = mapss[d[i].safe_lv]
              j.count = d[i].num
              s.push(j)
            }
            const dv = new DataSet.View().source(s)
            dv.transform({
              type: 'percent',
              field: 'count',
              dimension: 'item',
              as: 'percent',
            })
            const data = dv.rows
            this.safepiedata = data
          }
        }
      })
    },
    getdata(){
      // getoverview().then(res=>{
      //   this.patchCount = res.data.patchCount
      //   this.incrementPatchCountMonth = res.data.incrementPatchCountMonth
      //   this.formalPatchCountMonth = res.data.formalPatchCountMonth
      //   this.inventoryCount = res.data.inventoryCount
      // })
    },
    tablechange(pagination){
      this.tablepagination = pagination
      this.planlist()
    },
    searchlist(){
      this.tablepagination.current = 1
      this.planlist()
    },
    planlist(){
      let params = {}
      params.pageNo = this.tablepagination.current
      params.pageSize = 10
      params.name = this.search
      params.tasktype = this.tasktype

      getplan(params).then(res=>{
        let record = res.data.records
        for(let i in record){
          record[i].key =record[i].id
        }
        this.data = res.data.records
        this.tablepagination.total = res.data.total
      })
    }
  }
}
</script>

<style scoped>
.card {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  transition: 0.3s;
  height: 80px;
  border-radius: 5px;
  background: white;
  padding: 5px 0;
}

.gutter-example >>> .ant-row > div {
  background: transparent;
  border: 0;
  margin-bottom: 10px;
}
.gutter-box {
  background: white;
  padding: 5px 0;
  margin-bottom: 10px;
}
</style>
